<template>
    <div>
        <h3>父组件</h3>
        <!-- 渲染子组件             传递函数   自定义事件用：@事件名小写  第二步（第三步在子组件中）-->
        <Ex20 data="父组件数据:456" :fn="fn" @example="fa"/>
    </div>
    <div>
        <Ex21 :data="setupdata" @example="fa"/>
    </div>
</template>


<script setup>
/**
 * 掌握vue3的父传子
 *   1.父组件向子组件传值
 *      父组件中定义一个变量，将变量的值传递给子组件
 *      <子组件名 v-bind:变量名="变量值"></子组件名>
 *      <子组件名 :变量名="变量值"></子组件名>
 * 
 * 
 *   2.子组件接收父组件传递的值
 *      子组件中定义一个属性，将属性的值设置为父组件传递的值
 *  
 *      1:自定义属性
 *      2：defindProps接收
 * 
 *     https://cn.vuejs.org/guide/components/events.html 事件
 * 
 */
import { ref } from 'vue'
import Ex20 from './Ex20-子组件.vue'
import Ex21 from './Ex21-setup父子传递.vue'
//父组件传递给子组件的函数
const fn = ()=>{
    console.log('父组件的函数传给子组件')
}

const aaa = ref('父组件数据')
//父组件接收子组件传递的数据   第一步
const fa = (val,val2)=>{
    console.log('子组件将数据通过自定义事件传给父组件:',val)
    aaa.value = val
    
}


//setup生命周期的父子传递
const  setupdata = ref('父组件数据')



</script>


<style lang="">
    
</style>